<template>
  <view class="container">
    <NavBar title="手机登录"></NavBar>
    <WxMobileHeader></WxMobileHeader>
    <u--form
      :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth="60"
      :labelStyle="{color:'rgb(31,182,131)',fontWeight:'bold'}"
    >
		<u-form-item label="手机号" prop="mobile">
			<u-input v-model="form.mobile" type="number" shape="circle" :clearable="true" :focus="true" placeholder="请输入手机号"/>
			<!-- #ifdef MP-WEIXIN -->
			<template>
				<u-button
					type="success"
					slot="right"
					size="mini"
					shape="circle"
					text="获取手机号"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
				></u-button>
			</template>
			<!-- #endif -->
		</u-form-item>
		<u-form-item label="验证码:"  prop="code" >
			<u-input v-model="form.code" placeholder="请输入验证码" shape="circle"/>
			</u-input>
			<view slot="right" class="codeWrap"  @click="refreshCode">
				<mp-html class="code" :content="svg"></mp-html>
				<text class="refreshCode">换一张</text>
			</view>
		</u-form-item>
	  
    </u--form>
    <u-button type="success" shape="circle" text="获取验证码" :customStyle="{'margin-top':'40rpx'}" @click="submit"></u-button>
    <view class="wxIcon">
	<!-- #ifdef MP-WEIXIN -->
		<u-icon
			name="weixin-circle-fill"
			color="rgb(31,182,131)"
			size="50"
			label="微信登录"
			labelColor="rgb(31,182,131)"
			labelPos="bottom"
			@click="toWxAuth"
		></u-icon>
	<!-- #endif -->
	<!-- #ifdef H5 -->
		<u-icon
		  name="man-add"
		  color="rgb(31,182,131)"
		  size="50"
		  label="其它方式登录"
		  labelColor="rgb(31,182,131)"
		  labelPos="bottom"
		  @click="toWxAuth"
		></u-icon>
	<!-- #endif -->
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar'
import WxMobileHeader from './components/WxMobile-header'
export default {
  components: {
    NavBar,
    WxMobileHeader
  },
  data () {
    return {
      form: {
        mobile: '',
		code:''
      },
	  svg:'',
      loading: false,
      mobileCode: '',
      rules: {
        mobile: [
			{
				required: true,
				message: '请输入手机号',
				// 可以单个或者同时写两个触发验证方式 
				trigger: ['change', 'blur'],
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
				  // 上面有说，返回true表示校验通过，返回false表示不通过
				  // this.$u.test.mobile()就是返回true或者false的
				  return uni.$u.test.mobile(value)
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
        ],
		code:{
			type:'string',
			required:true,
			len:4,
			message:'请填写4位验证码',
			trigger: ['change', 'blur']
		}
      }
    }
  },
  computed:{
  	sid(){
  		return this.$store.state.auth.sid
  	}
  },
  onReady(){
  	if(!this.sid){
  		this.$store.commit('setSid',uni.$u.guid(26))
  	}
  },
  onShow(){
  	this.getCaptcha()
  },
  methods: {
	async getCaptcha(){
		const {code,data} = await this.$axios.api.getCaptcha({sid:this.sid})
		if(code === 200){
			this.svg = data 
		}
	},
	refreshCode(){
		this.getCaptcha()
	},
    getPhoneNumber (val) {
    },
    toWxAuth () {
      uni.navigateBack({ delta: 1 })
    },
    submit () {
      this.$refs.uForm.validate().then(async res => {
          if (this.loading) return
          this.loading = true
          const {code,data,msg}= await this.$axios.api.sendCode({
            phone: this.form.mobile,
			sid:this.sid,
			code: this.form.code,
			action:'手机号码登陆/注册'
          })
            if (code === 200) {
              this.loading = false
              this.mobileCode = res.data
              uni.showToast({
                title: '获取成功',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                uni.navigateTo({ url: `/subcom-my/Auth/Mobile-code?mobile=${this.form.mobile}` })
              }, 2000)
            } else if (code === 501) {
				this.loading = false
			    uni.showToast({
				  title: '短信正在发送中,请勿重复发送',
				  icon: 'none',
				  duration: 2000
			    })
                setTimeout(() => {
                  uni.navigateTo({ url: `/subcom-my/Auth/Mobile-code?mobile=${this.form.mobile}` })
                }, 2000)
            } else if(code === 401){
				this.loading = false
				uni.showToast({
				  title: msg,
				  icon: 'none',
				  duration: 2000
				})
			}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 20rpx;
  background-color: rgba(31, 182, 131, 0.1);
	.codeWrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		.code{
		  //code只要设置宽度就可以正常按大小显示了
			width: 180rpx;
			line-height: 60rpx;
		}
		.change{
			color: $u-success;
		}
	}
	.wxIcon {
		position: relative;
		top: 200rpx;
		display: flex;
		justify-content: center;
	}
}
</style>